<template>
  <el-dialog
    v-model="visible"
    v-if="load"
    title="修改产品加工说明"
    width="800px"
    draggable
    @close="close"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :z-index="2000"
  >
    <vxe-grid v-bind="gridOptions">
      <template #product_identification="{ row }">
        <el-select
          class="w-full"
          v-if="notAdd(row)"
          v-model="row.product_identification"
          placeholder="加工类型"
          @change="changeProductIdentification($event, row)"
        >
          <el-option
            v-for="item in options['goods.GoodsSkuIdentificationProcessing']?.[0]
              .productIdentificationText"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button v-if="row.type === 'add'" @click="handleAddRow"> +添加 </el-button>
      </template>
      <template #processing_method="{ row }">
        <el-select
          class="w-full"
          v-if="notAdd(row)"
          v-model="row.processing_method"
          placeholder="加工说明"
          @change="changeProcessingMethod($event, row)"
        >
          <el-option
            v-for="item in options['goods.GoodsSkuIdentificationProcessing']?.[0]
              .processingMethodText"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </template>
      <template #is_refund_warehouse_header>
        <div class="flex items-center">
          是否回仓
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="is_refund_warehouse_tooltip"
            placement="top-start"
          >
            <svg-icon icon-class="QuestionFilled"></svg-icon>
          </el-tooltip>
        </div>
      </template>
      <template #is_refund_warehouse="{ row }">
        <template v-if="row.product_identification == 11 && row.processing_method == 1">
          <el-select
            class="w-full"
            v-model="row.is_refund_warehouse"
            placeholder="是否回仓"
          >
            <el-option
              v-for="item in options['goods.GoodsSkuIdentificationProcessing']?.[0]
                .isRefundWarehouseText"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
        <template v-else>--</template>
      </template>
      <template #tag_style="{ row }">
        <el-select
          v-if="notAdd(row) && row.product_identification == 3"
          class="w-full"
          v-model="row.tag_style"
          placeholder="标识样式选择"
          @change="changeTagStyle($event, row)"
        >
          <el-option
            v-for="item in options['goods.GoodsSkuIdentificationProcessing']?.[0]
              .tagStyleText"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select
          class="w-full"
          v-model="row.tag_style"
          placeholder="标识样式选择"
          v-if="notAdd(row) && row.product_identification == 10"
          @change="changeTagStyle($event, row)"
        >
          <el-option
            v-for="item in options['goods.GoodsSkuIdentificationProcessing']?.[0]
              .agentText"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </template>

      <template #image="{ row }">
        <template v-if="notAdd(row)">
          <VImage :src="row.image" />
        </template>
      </template>

      <template #remark="{ row }">
        <el-input
          v-if="notAdd(row)"
          v-model="row.remark"
          placeholder="请输入备注"
        ></el-input>
      </template>
      <template #operation="{ row, rowIndex }">
        <el-button type="danger" link v-if="notAdd(row)" @click="handleDelete(rowIndex)">
          删除
        </el-button>
      </template>
    </vxe-grid>
    <div>
      注：
      <p>
        1、修改所有绑定供应商：不勾选，则只修改‘默认供应商’的产品加工说明数据；勾选后，修改该SKU绑定的所有供应商的产品加工说明。
      </p>
      <p>2、新增：在勾选数据上新增维护的数据；</p>
      <p>3、覆盖：维护的数据覆盖所勾选SKU的产品加工说明</p>
    </div>
    <template #footer>
      <div class="footer-btn flex items-center justify-center">
        <div>
          <el-checkbox v-model="ids.is_all" label="修改所有绑定供应商" />
          <el-radio-group v-model="ids.type" class="ml-4">
            <el-radio :label="1">新增</el-radio>
            <el-radio :label="2">覆盖</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="footer-btn flex items-center justify-center">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="save">保 存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { batchUpdateMark } from "../api.js";
import VImage from "@/components/Image/index.vue";
import { product_identification_image, tag_style_image } from "@/utils/product/data.js";
import { is_refund_warehouse_tooltip } from "@/utils/tooltip.js";

const visible = ref(false);
const loading = ref(false);
const props = defineProps({
  options: {
    type: Object,
    default: () => {},
  },
});
const { options } = toRefs(props);
const ids = ref({
  type: 1,
});
const emit = defineEmits(["refresh"]);
const load = ref(false);
const open = async (data) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  ids.value[data.name] = data.ids;
  visible.value = true;
};
const notAdd = (row) => row.type !== "add";
const gridOptions = reactive({
  round: true,
  height: "400",
  autoHidden: true,
  columnConfig: {
    resizable: true,
  },
  loading: false,
  data: [
    {
      type: "add",
    },
  ],
  columns: [
    {
      field: "product_identification",
      title: "加工类型",
      align: "center",
      slots: { default: "product_identification" },
    },
    {
      field: "processing_method",
      title: "加工说明",
      align: "center",
      slots: { default: "processing_method" },
    },
    {
      field: "is_refund_warehouse",
      title: "是否回仓",
      align: "center",
      slots: {
        header: "is_refund_warehouse_header",
        default: "is_refund_warehouse",
      },
    },

    {
      field: "tag_style",
      title: "标识样式选择",
      align: "center",
      slots: { default: "tag_style" },
    },
    {
      field: "image",
      title: "样式图片",
      align: "center",
      slots: { default: "image" },
    },

    {
      field: "remark",
      title: "备注",
      align: "center",
      slots: { default: "remark" },
    },
    {
      title: "操作",
      width: 90,
      align: "center",
      slots: { default: "operation" },
    },
  ],
});
const handleAddRow = () => {
  gridOptions.data.splice(-1, 0, {});
};
const handleDelete = (index) => {
  gridOptions.data.splice(index, 1);
};
const save = async () => {
  loading.value = true;
  try {
    let data = getTableData().map((i) => {
      if (!i.tag_style) {
        delete i.tag_style;
      }
      return i;
    });
    if (!data?.length) return ElMessage.warning("请添加数据");
    const res = await batchUpdateMark(Object.assign({}, ids.value, { data: data }));
    if (res.code === 200) {
      ElMessage.success("操作成功");
      close(true);
    }
  } catch (error) {
    console.log(error);
  } finally {
    loading.value = false;
  }
};
const getTableData = () => {
  const data = gridOptions.data.filter((item) => item.type !== "add");
  return data;
};

const close = async (refresh) => {
  ids.value = {
    type: 1,
  };
  gridOptions.data = [
    {
      type: "add",
    },
  ];
  if (refresh) emit("refresh");
  visible.value = false;
};
defineExpose({ open });

const changeProduct = async (event, row) => {
  row.tag_style = "";
};

const changeProductIdentification = (val, row) => {
  const image = product_identification_image.get(val);
  row.image = image;
  if (val == 3) {
    row.tag_style = 1;
    changeTagStyle(row.tag_style, row);
  } else if (val == 10) {
    row.tag_style = 5;
    changeTagStyle(row.tag_style, row);
  } else {
    row.tag_style = 0;
  }
  row.is_refund_warehouse = "";
  return image;
};

const changeProcessingMethod = (val, row) => {
  row.is_refund_warehouse = "";
};

const changeTagStyle = (val, row) => {
  const image = tag_style_image.get(val);
  row.image = image;
  return image;
};
</script>
<style lang="scss" scoped>
.footer-btn {
  :deep(.el-button + .el-button) {
    margin-left: 8px !important;
  }
}
</style>
